<template>
  <div class="ai-chat">
    <div class="chat-main">
      <div class="chat-header">
        <h1>AI问答</h1>
      </div>
      <div class="chat-window" ref="chatWindow">
      <div v-for="(message, index) in messages" :key="index" :class="['message', message.sender]">
        <div class="text">{{ message.text }}</div>
      </div>
      </div>
      <div class="input-area">
        <input v-model="userInput" @keyup.enter="sendMessage" placeholder="请输入您的疑问~" />
        <button @click="sendMessageOrStop">
          <i v-if="!isSending" class="el-icon-s-promotion"></i>
          <i v-else class="el-icon-video-pause"></i>
        </button>
      </div>
    </div>
    
  </div>
</template>
<script>
import { send } from '@/api/ai';

export default {
  name: 'AI',
  data() {
    return {
      userInput: '',
      messages: [],
      isSending: false
    }
  },
  methods: {
    sendMessage() {
      if (this.userInput.trim() === '') return;
      this.isSending = true;
      this.messages.push({ text: this.userInput, sender: 'user' });
      this.userInput = '';
      this.getAIResponse(this.messages[this.messages.length - 1].text);
    },
    getAIResponse(message) {
      const param = {
        message: message
      }
      send(param)
        .then(response => {
          this.messages.push({ text: response.data.message, sender: 'ai' });
          this.scrollToBottom();
        })
        .catch(error => {
          console.error('获取AI回复失败', error);
          this.messages.push({ text: '获取AI回复失败，请稍后再试', sender: 'ai' });
          this.scrollToBottom();
        })
        .finally(() => {
          this.isSending = false;
        });
    },
    sendMessageOrStop() {
      if (this.isSending) {
        this.stopSending();
      } else {
        this.sendMessage();
      }
    },
    stopSending() {
      // 停止发送逻辑
      this.isSending = false;
    },
    scrollToBottom() {
      this.$nextTick(() => {
        const chatWindow = this.$refs.chatWindow;
        if (chatWindow) {
          chatWindow.scrollTop = chatWindow.scrollHeight;
        }
      });
    }

  }
}
</script>

<style scoped>
/* 添加样式 */
.ai-chat {
  display: flex;
  height: 90vh;
  padding: 20px 10px;
  background-color: #fff;
}

.chat-main {
  flex: 1;
  margin-left: 20px;
  display: flex;
  flex-direction: column;
  max-width: 80%; /* 设置最大宽度，使其更紧凑 */
  margin: 0 auto; /* 使内容居中 */
}

.chat-header {
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: sticky; /* 保持置顶 */
  top: 0;
  z-index: 1; /* 确保在最上层 */
}

.chat-header h1 {
  margin: 0;
  font-size: 24px;
}

.chat-window {
  flex: 1;
  overflow-y: auto;
  margin-top: 20px; /* 确保内容不与标题重叠 */
  padding: 10px;
  word-wrap: break-word;
}

/* 自定义滚动条样式 */
.chat-window::-webkit-scrollbar {
  width: 8px; /* 滚动条宽度 */
}

.chat-window::-webkit-scrollbar-track {
  background: #f1f1f1; /* 滚动条轨道背景色 */
}

.chat-window::-webkit-scrollbar-thumb {
  background: #888; /* 滚动条滑块背景色 */
  border-radius: 4px; /* 滑块圆角 */
}

.chat-window::-webkit-scrollbar-thumb:hover {
  background: #555; /* 滑块悬停时的背景色 */
}

.message {
  margin-bottom: 10px;
  word-wrap: break-word; /* 确保文本自动换行 */
}

.message.user {
  text-align: right;
}

.message.ai {
  text-align: left;
}

.text {
  display: inline-block;
  padding: 10px;
  border-radius: 8px;
  max-width: 70%;
  word-wrap: break-word; /* 确保文本自动换行 */
}

.message.user .text {
  background-color: #007bff;
  color: #fff;
}

.message.ai .text {
  background-color: #e9ecef;
  color: #000;
}

.input-area {
  display: flex;
  margin-top: auto;
  justify-content: center; /* 水平居中 */
}

input {
  flex: 1;
  max-width: 70%;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 8px;
  margin-right: 10px;
  outline: none; /* 去掉选中时的边框加深效果 */
}

button {
  padding: 10px;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

button:hover {
  background: none;
}

button:disabled {
  background: none;
  cursor: not-allowed;
}

button i {
  font-size: 30px; /* 放大图标大小 */
  color: #007bff; /* 设置图标的颜色 */
}
</style>